<template>
  <!--  jiera-->
  <div>
    <div v-if='pagination.total>0'>
      <div
        v-for='item in taskList'
        :key='item.id'
        class='mb-3 cursor-pointer'
        @click.stop='!!true?()=>handelGoDetail(item.taskId ,item.noticeType,item.messageType,item.taskCommentId,item.isRead):()=>{}'
        v-login='!!true?()=>handelGoDetail(item.taskId ,item.noticeType,item.messageType,item.taskCommentId,item.isRead):undefined'
      >
        <div style='display: flex; align-items: center;'> <!--        外层固定-->
          <div style='width: 70%; display: flex; flex-direction: column;'>  <!--        里层固定-->
            <div class='flex gap-3 items-center'>
              <div class='text-sm font-semibold' style='color: #2F2F2F'>

                <div v-if='item.isRead==0' style='color: #4D94FD'>*{{ item.messageContext }}</div>
                <div v-if='item.isRead==1'>{{ item.messageContext }}</div>
              </div>
              <!--              <div style='font-size: 14px;  color: black;'>评论了你的交流</div>-->
              <!--/*              <div style='font-size: 14px;color: #4D94FD'>{{ item.title }}</div>*/-->
            </div>
            <div class='mt-2'>
              {{ item.description }}
            </div>
            <div style='color: #989694'>{{ dayjs(item.createdTime).format('YYYY-MM-DD HH:MM:ss') }}</div>
          </div> <!--        里层固定-->
        </div> <!--        外层固定-->
        <!-- 评论 -->
        <div class='divider' style='color: lightgrey'></div>
      </div>
      <div class='mt-2 flex justify-end'>
        <el-pagination
          background
          layout='total,prev, pager, next'
          :total='pagination.total'
          v-model:current-page='currentPage'
        />
      </div>
    </div>
    <NoData v-else></NoData>
  </div>
</template>

<script setup lang='ts'>
import {TaskEntity, Pagination, messageEntity} from '~/composables/api/task'
import dayjs from 'dayjs'
import {useRoute, useRouter} from 'vue-router'
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useUserStore} from '@/stores/user'

const userStore = useUserStore()
const route = useRoute()
const props = withDefaults(
  defineProps<{
    list: TaskEntity[]
    pagination: Pagination
  }>(),
  {
    list: () => [],
    pagination: () => ({pageSize: 10, pageNum: 1, total: 0}),
  },
)
const $emit = defineEmits(['refresh'])

const currentUserId = computed(() => {
  return route.query?.id || '10034'
})
const currentLoginUserId = computed(() => userStore.userInfo.uid || '1000000')

const currentPage = computed({
  get: () => props.pagination.pageNum,
  set: (value) => {
    $emit('refresh', {pageNum: value})
  },
})

const taskList: ComputedRef<any[]> = computed(() => {
  return props.list
})

const handleClick = async (type: string, id: string | number) => {
  if (type === 'liked') {
    await service.task.likeTask(id)
    $emit('refresh')
  } else if (type === 'collected') {
    await service.task.collectTask(id)
    $emit('refresh')
  }
}

const router = useRouter()
const handelGoDetail = (taskId: number, noticeType: number, messageType: number, taskCommentId: number, isRead: number) => {
  debugger
  if (isRead == 0) {
    service.task.setRead(taskId, noticeType, messageType, taskCommentId)
    userStore.messageRecordNum -= 1;
  }
  router.push(`/main/task/${taskId}`)
}

const taskInfo = ref<any>({})

</script>


<style>
.divider {
  border-top: 1px solid #ccc; /* 分割线颜色和宽度 */
  margin: 10px 0; /* 上下间距 */
}

.image-modal img {
  max-width: 90%;
  max-height: 90%;
}

.image-modal-navigation button {
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
}

</style>
